<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="btn1">点击</button>
  <button class="btn2">禁用按钮，3秒后启用</button>
  <script>
    // ============================== 箭头函数的this ==============================
    // 1. 以前this的指向：  指向调用者
    // console.log(this)  // window

    // // 普通函数
    function fn() {
      console.log(this)  // window
    }
    fn()

    // // 对象方法里面的this
    const obj = {
      name: 'andy',
      sayHi: function () {
        console.log(this)  // obj
      }
    }
    obj.sayHi()

    // 2. 箭头函数的中this指向 - 沿用上一层作用域的this 
    const obj2 = {
      name: 'andy',
      sayHi: () => {
        console.log(this)  // window
      }
    }
    obj2.sayHi()

    // 3. 我们可以根据需求来选择是否使用箭头函数 this
    const btn1 = document.querySelector('.btn1')
    const btn2 = document.querySelector('.btn2')

    // 需求：点击按钮，按钮变红
     btn1.addEventListener('click', function () {
      this.style.color=`red`
     })

    // 需求：点击按钮，禁用按钮，3秒后启用
     btn2.addEventListener('click', function () {
      this.disabled=true
      //定时器和延时器使用this需要使用到箭头函数
      setTimeout( ()=> {
        this.disabled=false
      },3000)
     })
  </script>
</body>

</html>